<script setup>
import { ref, onMounted } from 'vue'
import { listAdminAdmins } from '../../api/admin'

const list = ref([])
const total = ref(0)
const query = ref({ name: '', page: 1, size: 10 })
const loading = ref(false)

const fetchList = async () => {
  loading.value = true
  try {
    const data = await listAdminAdmins({ name: query.value.name || undefined, page: query.value.page, size: query.value.size })
    list.value = data.list || []
    total.value = data.total || 0
  } finally { loading.value = false }
}

onMounted(fetchList)
</script>

<template>
  <el-card>
    <h3>管理员管理（列表）</h3>
    <el-form :inline="true" :model="query" class="mb-2">
      <el-form-item label="姓名"><el-input v-model="query.name" /></el-form-item>
      <el-form-item><el-button type="primary" @click="query.page=1;fetchList()">查询</el-button></el-form-item>
    </el-form>
    <el-table :data="list" v-loading="loading" style="width:100%">
      <el-table-column prop="adminId" label="管理员ID" width="100" />
      <el-table-column prop="username" label="用户名" />
      <el-table-column prop="name" label="姓名" />
      <el-table-column prop="phone" label="手机号" />
    </el-table>
    <el-pagination class="mt-2" background layout="total, prev, pager, next" :total="total" :page-size="query.size" :current-page="query.page" @current-change="(p)=>{query.page=p;fetchList()}" />
  </el-card>
</template>

<style scoped>
.mb-2{ margin-bottom:12px; }
.mt-2{ margin-top:12px; }
</style>